<template>
  <img
    v-if="!src"
    :src="defaultSrc"
    :alt="alt"
    :class="[imgClass]"
  >
  <img
    v-else
    :data-src="realSrc"
    :src="defaultSrc"
    :alt="alt"
    :class="['lazy-image', imgClass]"
    @error="handleError"
  >
</template>

<script setup lang="ts">
/**
 * 懒加载图片组件
 * 支持懒加载、默认图片、错误处理等功能
 */

import { generateDefaultLogo, generateCategoryDefaultImage, initLazyLoading } from '~/utils/imageUtils';

interface Props {
  /** 真实图片地址 */
  src?: string;
  /** 图片alt文本 */
  alt: string;
  /** 图片CSS类名 */
  imgClass?: string;
  /** 图片类型，决定默认图片样式 */
  type?: 'logo' | 'category';
  /** 分类标题（当type为category时使用） */
  categoryTitle?: string;
}

const props = withDefaults(defineProps<Props>(), {
  type: 'logo',
  imgClass: '',
  categoryTitle: '',
  src: '',
});

// 获取运行时配置
const config = useRuntimeConfig();

// 计算真实的图片地址
const realSrc = computed(() => {
  if (props.src?.startsWith('http')) {
    return props.src;
  }
  if (props.src?.startsWith('/')) {
    return `${config.public.siteUrl}${props.src}`;
  }
  return `${config.public.siteUrl}/${props.src}`;
});

// 计算默认图片地址
const defaultSrc = computed(() => {
  if (props.type === 'category' && props.categoryTitle) {
    return generateCategoryDefaultImage(props.categoryTitle);
  }
  return generateDefaultLogo();
});

/**
 * 处理图片加载错误
 * 当图片加载失败时，替换为默认图片
 */
const handleError = (event: Event) => {
  const img = event.target as HTMLImageElement;
  if (props.type === 'category' && props.categoryTitle) {
    img.src = generateCategoryDefaultImage(props.categoryTitle);
  } else {
    img.src = generateDefaultLogo();
  }
};

// 组件挂载时初始化懒加载
onMounted(() => {
  initLazyLoading();
});
</script>